<template>
  <div class="userEditContainer">
    <div class="navHeader">
      <van-nav-bar title="编辑资料" safe-area-inset-top fixed>
        <template #left>
          <van-icon name="arrow-left" size="0.48rem" color="#fff" @click="$router.back()"/>
        </template>
      </van-nav-bar>
      <div class="editContent">
        <van-cell title="头像" is-link>
          <template #default>
            <van-image
              round
              width="50"
              height="50"
              @click="$refs.iptFile.click()"
              :src="userInfo.photo"
            />
            <input type="file" ref="iptFile" v-show="false" accept="image/*" @change="onFileChange">
          </template>
        </van-cell>
        <van-cell title="名称" is-link :value="userInfo.name" @click="editName" />
        <van-cell title="性别" is-link :value="userInfo.gender === 0 ? '男' : '女'" @click="isShowSheet = true" />
        <van-cell title="生日" is-link :value="userInfo.birthday" @click="dateShow = true" />
      </div>
    </div>
    <!-- 编辑名称弹窗 -->
    <van-dialog v-model="editNameDialog" title="编辑名称" show-cancel-button @confirm="editUserInfo">
      <input type="text" v-model="userName" ref="userFocus" class="nameInput">
    </van-dialog>
    <!-- 性别选择 -->
    <van-action-sheet v-model="isShowSheet" cancel-text="取消" :actions="userSex" @select="selectSex" />
    <!-- 日期选择 -->
    <van-popup v-model="dateShow" position="bottom" round >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择出生日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="selectDate"
        @cancel="cancelSelectDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserDataAPI, editUserPhotoAPI, editUserInfoAPI } from '@/api'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      userInfo: {},
      fileList: [],
      editNameDialog: false,
      userName: '',
      isShowSheet: false,
      userSex: [{ name: '男', value: 0 }, { name: '女', value: 1 }],
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2030, 12, 31),
      currentDate: '',
      dateShow: false,
      sexValue: 0
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 获取用户资料
    async getUserInfo () {
      const res = await getUserDataAPI()
      this.userInfo = res.data.data
      this.currentDate = res.data.data.birthday
      this.userName = res.data.data.name
    },
    // 上传图片
    async onFileChange (ev) {
      console.log(ev.target.files[0])
      const res = await editUserPhotoAPI({ photo: ev.target.files[0] })
      console.log(res)
      this.getUserInfo()
    },
    // 编辑名称
    editName () {
      setTimeout(() => {
        this.$refs.userFocus.focus()
      }, 0)
      this.editNameDialog = true
    },
    // 选择性别
    selectSex (action) {
      // this.userInfo.gender = action.value
      this.sexValue = action.value
      this.editUserInfo()
      this.isShowSheet = false
    },
    // 选择日期
    selectDate (value) {
      this.currentDate = dayjs(value).format('YYYY-MM-DD')
      this.editUserInfo()
      this.dateShow = false
    },
    // 取消选择日期
    cancelSelectDate () {
      this.dateShow = false
    },
    // 编辑用户资料
    async editUserInfo () {
      await editUserInfoAPI({ name: this.userName, gender: this.sexValue, birthday: this.currentDate })
      this.$notify({ type: 'success', message: '编辑成功！' })
      this.getUserInfo()
    }
  }
}
</script>

<style lang="less" scoped>
  .van-nav-bar {
    background-color: pink;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  .editContent {
    margin-top: 46px;
    .van-cell {
      align-items: center;
    }
  }
  .nameInput {
    width: 100%;
    text-align: center;
    border: none;
    margin: 10px 0;
  }
</style>
